/* eslint-disable jsx-a11y/alt-text */
/* eslint-disable @next/next/no-img-element */
import { SDApi } from "../api/expand/stableDiffusion";
import { IconButton } from "./button";
import { PromptInput, showImageModal } from "./ui-lib";
import { useState } from "react";
import ConfigIcon from "../icons/config.svg";

export const GenerateTest = () => {
  const [prompt, setPrompt] = useState<string>("");
  const [image, setImage] = useState<string>();
  const [generateImg, setGenerateImg] = useState<boolean>(false);
  return (
    <>
      <PromptInput
        onChange={(val) => setPrompt(val)}
        value={prompt}
        rows={1}
      ></PromptInput>
      <IconButton
        text={"生成"}
        bordered
        icon={<ConfigIcon />}
        disabled={generateImg}
        onClick={async () => {
          setGenerateImg(true);
          try {
            const res = await SDApi.generate(prompt);
            setImage(res.images[0]);
          } catch {
            alert("生成失败,stableDiffusion服务未启动，或者api设置错误");
          } finally {
            setGenerateImg(false);
          }
        }}
      />
      {image && (
        <img
          src={`data:image/png;base64,${image}`}
          style={{ width: 500, height: 500, padding: 10, borderRadius: 20 }}
          onClick={() => {
            showImageModal(`data:image/png;base64,${image}`);
          }}
        />
      )}
    </>
  );
};
